<!DOCTYPE html>
<html>
{% load static %}
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
		<!--1、首先：引入jQuery的js文件-->

    <link href="{% static '/css/login.css' %}" rel="stylesheet">
    <script src="{% static '/js/jquery-3.4.1.min.js' %}"></script>
        <!--2、外链式：再引入自己写的js文件-->
	</head>
    <style>
        .error-message{
            width: 100px;
            height: 20px;
            font-size:10px ;
        }
    </style>
	<body style=" min-height: 500px;background-image: url('/static/img/注册8.jpg'); background-size: cover; background-repeat: no-repeat;">
	<form action="/user/register/" method="post" class="content" style="background-color:transparent; margin-left: 15%" onsubmit="return register()">
          {% csrf_token %}
			<div class="line">
				<img src="/static/img/登录头.jpg" style="height: 70px;width:70px;" alt=""  />
			</div>
			<div class="line">
				<h1>注册帐号</h1>
			</div>

			<div class="line">
				<div class="line_left" style="margin-left:200px;float: left">
					<label for="cname" >用户名称</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="text" name="cname" id="cname" placeholder="输入用户名称" style="margin-left: 9px;">
					<p><span id="aSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>

			<div class="line" style="margin-left:-50px;float: left">
				<div class="line_left" style=" width: 400px;float: left">
					<label for="cpassword">密码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="password" name="cpassword" id="cpassword" placeholder="输入用户密码"
						 />
                    <p><span id="bSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>

			<div class="line" style="float: left;margin-left:-50px;">
				<div class="line_left" style="width: 400px;float: left">
					<label for="cpassword2">确认密码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="password" name="cpassword2" id="cpassword2" placeholder="输入确认密码" 
						/>

				</div>
			</div>

			<div class="line" style="float: left;margin-left:-50px;">
				<div class="line_left" style="width: 400px;float: left">
					<label for="email">邮箱</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="text" name="email" id="email" placeholder="输入邮箱"
						/>
                    <p><span id="dSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>

			<div class="line" style="float: left;margin-left:-50px;">
				<div class="line_left" style="width: 400px;float: left">
					<label for="ecode">验证码</label>
				</div>
				<div class="line_right" style="width: 400px;float: left">
					<input type="text" name="ecode" id="ecode" placeholder="输入验证码" style="width: 200px;margin-left: -160px">
                    <p><span id="cSpan" class="error-message" style="color:red; margin-right: 290px;"></span></p>
					<div style="width: 100px; height: 31px; margin-left: 220px;margin-top: -28px">	<p style="margin-top: -50px;"><a class="yz" href="javascript:;" onclick="EmailCode()">发送验证码</a></p></div>
                    <p><span id="eSpan" class="error-message" style="color:red;"></span></p>
				</div>
			</div>
            <div class="line" style="float: left;margin-left:-24px;"><a href="/user/login/">已有账号！前往登入</a></div>
        <div class="line" style="float: left;margin-left:50px; background-color: transparent">
            <button style="background-color:#87CEEB;width: 180px;height: 50px">注册</button>
        </div>
	</form>

 	</body>
<script>
         //邮箱格式判断
        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }


        function register() {
            var cname = $("#cname").val();
            var cpassword = $("#cpassword").val();
            var cpassword2 = $("#cpassword2").val()
            var email = $("#email").val()
            var code = $("#ecode").val();
            // 清除所有错误消息
            $(".error-message").text("");

            if (cname.length < 1) {
                $("#aSpan").text("请填写用户名");
                return false;
            }

            if (cpassword.length < 1) {
                $("#bSpan").text("密码不能为空");
                return false;
            }
            if (cpassword2.length < 1) {
                $("#cSpan").text("密码不能为空");
                return false;
            }
            if(cpassword !== cpassword2){
                alert("两次密码不一致！！")
                 return false;
            }
            if (email.length<1){
                $("#dSpan").text("邮箱不能为空");
                return false;
            }

            if (ecode.length < 1) { // 验证码长度应大于0
                $("#eSpan").text("请填写验证码");
                return false;
            }
            if (checkEcode(code,email)){
                return false
            }

            // 如果所有验证都通过，则允许表单提交
            return true;
        }

        // 可以添加额外的逻辑来处理验证码发送等
        $(".send-code").click(function(e) {
            e.preventDefault(); // 阻止链接的默认行为
            // 这里可以添加发送验证码的逻辑
            alert("验证码已发送！");
        });


       {# 邮箱唯一性校验 #}

        function checkEmail(email) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "/user/checkEmail/",
                    type: 'GET',
                    data: 'e=' + email,
                    success: function (result) {
                        if (result.flag) {
                            $('#eSpan').html('该邮箱已被绑定!!');
                            resolve(true); // 表示邮箱已被绑定
                        } else {
                            resolve(false); // 表示邮箱未被绑定
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(new Error('检查邮箱时出错: ' + xhr.responseText));
                    }
                });
            });
        }
        //等待邮箱检验返回flag值在判断是否发送验证码
        async function EmailCode() {
            var email = $('#email').val();
            try {
                if (await checkEmail(email)) {
                    alert('该邮箱已被绑定');
                    return false;
                }

                $.ajax({
                    url: "/user/email_code/",
                    type: "GET",
                    data: 'e=' + email,
                    dataType: 'json',
                    success: function (response) {
                        if (response.message) {
                            alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        alert('发送邮件验证码失败：' + xhr.responseText);
                    }
                });
            } catch (error) {
                alert('检查邮箱时发生错误: ' + error.message);
            }
        }
        //校验验证码是否正确
        function checkEcode(code,email) {
            var flag = false

            $.ajax({
                url: '/user/checkEcode/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {
                    "code": code,
                    "email":email,
                },
                success: function (result) {
                    var flag2 = result.flag;
                    if (flag2) {
                        flag = true;
                        $('#cSpan').html('验证码不正确');
                    }
                }
            })
            return flag
        }
</script>

</html>